document.addEventListener('DOMContentLoaded', function () {
    // 获取所有 service-item 元素
    const serviceItems = document.querySelectorAll('.service-item');
    // 获取轮播图容器
    const serFocusBgcb = document.querySelector('.serFocus-bgcb');
    // 获取轮播内容元素
    const contents = document.querySelectorAll('.serFocus-fr-content');
    // 获取轮播点元素
    const dian = document.querySelectorAll('.serFocus-dian');
    // 获取关闭按钮
    const closeButton = document.querySelector('.serFocus-fr-close');

    // 显示轮播图并切换到指定索引
    function showSerFocus(index) {
        serFocusBgcb.style.display = 'block'; // 显示轮播图容器
        serFocusBgcb.classList.add('active'); // 添加动画类

        // 切换内容显示
        contents.forEach((content, i) => {
            content.style.display = i === index ? 'block' : 'none';
        });

        // 更新轮播点状态
        dian.forEach((dot, i) => {
            dot.classList.toggle('dj', i === index);
        });
    }

    // 关闭轮播图
    function closeSerFocus() {
        serFocusBgcb.style.display = 'none';
        serFocusBgcb.classList.remove('active'); // 移除动画类
    }

    // 为关闭按钮添加点击事件
    closeButton.addEventListener('click', closeSerFocus);

    // 为每个 service-item 添加点击事件
    serviceItems.forEach((item, index) => {
        item.addEventListener('click', () => {
            showSerFocus(index); // 显示轮播图并切换到对应索引
        });
    });
});